<template>
  <div>
    <div class="all-data">
      <div class="title">实时数据</div>
      <div class="content">
        <div class="box temp">
          <div class="flex">
            <div class="value"
                 v-if="temp">
              <span class="num">{{Number(temp.val)?temp.val.toFixed(1):0}}<sup class="unit">°C</sup></span>
            </div>
            <div class="value"
                 v-else>
              <span class="num">NC</span>
            </div>
            <div class="img">
              <img src="@/assets/platformDetail/temp_new.png"
                   class="overview-img" />
            </div>
          </div>
          <div>
            <div class="name">温度</div>
            <div class="indoor">室内</div>
          </div>
        </div>
        <div class="box hum">
          <div class="flex">
            <div class="value"
                 v-if="hum">
              <span class="num">{{Number(hum.val)?hum.val.toFixed(0):0}}<sup class="unit">%</sup></span>
            </div>
            <div class="value"
                 v-else>
              <span class="num">NC</span>
            </div>
            <div class="img">
              <img src="@/assets/platformDetail/hum_new.png"
                   class="overview-img" />
            </div>
          </div>
          <div>
            <div class="name">相对湿度</div>
            <div class="indoor">室内</div>
          </div>
        </div>
        <div class="box co2">
          <div class="flex">
            <div class="value"
                 v-if="co2">
              <span class="num">{{Number(co2.val)?co2.val.toFixed(0):0}}<sup class="unit">ppm</sup></span>
            </div>
            <div class="value"
                 v-else>
              <span class="num">NC</span>
            </div>
            <div class="img">
              <img src="@/assets/platformDetail/co2_new.png"
                   class="overview-img" />
            </div>
          </div>
          <div>
            <div class="name">CO<sub>2</sub></div>
            <div class="indoor">室内</div>
          </div>
        </div>
        <div class="box pm25">
          <div class="flex">
            <div class="value"
                 v-if="pm25">
              <span class="num">{{Number(pm25.val)?pm25.val.toFixed(0):0}}<sup class="unit">ug/m³</sup></span>
            </div>
            <div class="value"
                 v-else>
              <span class="num">NC</span>
            </div>
            <div class="img">
              <img src="@/assets/platformDetail/pm25_new.png"
                   class="overview-img" />
            </div>
          </div>
          <div>
            <div class="name">PM2.5</div>
            <div class="indoor">室内</div>
          </div>
        </div>
        <div class="box pm10">
          <div class="flex">
            <div class="value"
                 v-if="pm10">
              <span class="num">{{Number(pm10.val)?pm10.val.toFixed(0):0}}<sup class="unit">ug/m³</sup></span>
            </div>
            <div class="value"
                 v-else>
              <span class="num">NC</span>
            </div>
            <div class="img">
              <img src="@/assets/platformDetail/pm10_new.png"
                   class="overview-img" />
            </div>
          </div>
          <div>
            <div class="name">PM10</div>
            <div class="indoor">室内</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAllDeviceDataRealtime } from "@/api/platformManage";
export default {
  name: "overView",
  props: {
    deviceId: {
      type: String,
      default: ""
    },
    deviceName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      temp: {
        val: 0,
        evaluate: {
          healthLevelShow: 0
        }
      },
      hum: {
        val: 0,
        evaluate: {
          healthLevelShow: 0
        }
      },
      co2: {
        val: 0,
        evaluate: {
          healthLevelShow: 0
        }
      },
      pm25: {
        val: 0,
        evaluate: {
          healthLevelShow: 0
        }
      },
      pm10: {
        val: 0,
        evaluate: {
          healthLevelShow: 0
        }
      }
    };
  },
  filters: {
    tempLevelFil(level) {
      switch (level) {
        case "适宜":
          return "level-a";
        case "偏冷":
          return "level-c";
        case "偏热":
          return "level-d";
        default:
          return "";
      }
    },
    humLevelFil(level) {
      switch (level) {
        case "适宜":
          return "level-a";
        case "微湿":
          return "level-c";
        case "高湿":
          return "level-yellow";
        case "干燥":
          return "level-d";
        default:
          return "";
      }
    },
    co2LevelFil(level) {
      switch (level) {
        case "LEVEL_A":
          return "level-a";
        case "LEVEL_B":
          return "level-b";
        case "LEVEL_C":
          return "level-c";
        case "LEVEL_D":
          return "level-yellow";
        case "LEVEL_E":
          return "level-e";
        case "LEVEL_F":
          return "level-f";
        default:
          return "";
      }
    },
    pm25LevelFil(level) {
      switch (level) {
        case "LEVEL_A":
          return "level-a";
        case "LEVEL_B":
          return "level-b";
        case "LEVEL_C":
          return "level-yellow";
        case "LEVEL_D":
          return "level-d";
        case "LEVEL_E":
          return "level-e";
        case "LEVEL_F":
          return "level-f";
        default:
          return "";
      }
    },
    pm10LevelFil(level) {
      switch (level) {
        case "LEVEL_A":
          return "level-a";
        case "LEVEL_B":
          return "level-b";
        case "LEVEL_C":
          return "level-yellow";
        case "LEVEL_D":
          return "level-d";
        case "LEVEL_E":
          return "level-e";
        case "LEVEL_F":
          return "level-f";
        default:
          return "";
      }
    }
  },
  watch: {
    deviceId(newVal) {
      this.getAllDeviceDataRealtimeFun(newVal);
    }
  },
  mounted() {
    // this.getAllDeviceDataRealtimeFun(this.deviceId);
  },
  methods: {
    getAllDeviceDataRealtimeFun(deviceId) {
      getAllDeviceDataRealtime(this.deviceId).then(res => {
        let data = res.value;
        if (JSON.stringify(data) == "{}") {
          this.temp = null;
          this.hum = null;
          this.co2 = null;
          this.pm25 = null;
          this.pm10 = null;
        } else {
          this.temp = data.TEMPERATURE;
          this.hum = data.HUMIDITY;
          this.co2 = data.CO2;
          this.pm25 = data.PM25;
          this.pm10 = data.PM10;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.all-data {
  width: 100%;
  background-color: #fff;
  // height: 312px;
  border-radius: 4px;
  padding: 10px 20px;
  .title {
    font-family: "Microsoft YaHei";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
  }
  .content {
    display: flex;
    justify-content: start;
  }
  .box {
    width: 23%;
    padding: 10px;
    margin: 1%;
    .flex {
      display: flex;
      justify-content: space-between;
    }
    .value {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 700;
      font-size: 32px;
      line-height: 46px;
      color: #0a0a0a;
    }
    .unit {
      font-size: 20px;
    }
    .name {
      font-weight: 700;
      font-size: 16px;
      line-height: 20px;
      color: #000000;
    }
    .indoor {
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      color: #636e78;
    }
  }
  .temp {
    background-color: #fffbee;
  }
  .hum {
    background-color: #eff8ff;
  }
  .co2 {
    background-color: #f3fff6;
  }
  .pm25 {
    background-color: #f3f1ff;
  }
  .pm10 {
    background-color: #f2f4f5;
  }
}
.overview-img {
  width: 46px;
}
@media screen and (max-width: 1670px) {
  .all-data {
    padding: 20px;
  }
}
</style>
